<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>中视场彩色相机</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/bbfont.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <link rel="stylesheet" href="qv.css">
  <style>
    #thumbs > div {
      display: inline-block;position: relative;overflow: hidden;
      max-width: 250px;
      max-height: 200px;
    }
    #thumbs > div > img {width: 250px;height: 100%}
    #thumbs > div > b {position: absolute;text-shadow: 1px 1px 1px #FFF}
    #viewer {background: transparent}
    #viewer.M1 > div > .history {display: none}
    #viewer.M2 > div > div:nth-child(n+2) {display: none}
    #viewer.M2 > div > .history {flex-grow: 1}
    #viewer.M3 > div > .history {width: 311px !important;}
  </style>
</head>
<body id="viewer">
<div class="d-flex d-flex flex-row vh-100">
  <div class="history d-flex flex-column">
    <div class="d-block p-2">
      <input type="date" class="btn btn-light btn-sm p-1">
      <button class="btn btn-sm btn-secondary p-1 "><i class="fa fa-search"></i> 检索</button>
    </div>
    <div class="flex-grow-1 position-relative" onclick="main.viewer.className='M3'">
      <div id="thumbs" class="h-100 w-100 p-1 position-absolute" style="overflow-y: auto">
        <div><b> 1-3123</b><img src="/static/imgs/zp.png"></div>
        <div><b> 1-3123</b><img src="/static/imgs/zp.png"></div>
        <div><b> 1-3123</b><img src="/static/imgs/zp.png"></div>
        <div><b> 1-3123</b><img src="/static/imgs/zp.png"></div>
      </div>
    </div>
  </div>
  <div class="flex-grow-1 d-flex flex-column">
    <div id="ctrl" class="d-flex flex-row bg-dark" style="height: 28px">
      <button class="fa fa-download btn btn-dark btn-r" onclick="download()"> 下载</button>
      <label title="对比度" class="btn-r btn btn-dark"><i class="fa fa-adjust"></i>
        <input type="range" value="1" min="0" max="2" step="0.01"></label>
      <label title="亮度" class="btn-r btn btn-dark"><i class="fa fa-sun-o "></i>
        <input type="range" value="1" min="0" max="2" step="0.01"></label>
      <label title="色调" class="btn-r btn btn-dark"><i class="fa fa-dashboard "></i>
        <input type="range" value="0" min="0" max="360"> </label>
      <label title="饱和度" class="btn-r btn btn-dark"><i class="fa fa-certificate "></i>
        <input type="range" value="1" min="0" max="2" step="0.01"> </label>
      <button title="重置" class="btn-r btn btn-dark" onclick="reset()">
        <i class="fa fa-refresh"></i>
        <i class="fa fa-circle-half"></i>
      </button>
    </div>
    <div id="img-viewer" class="flex-grow-1 d-grid position-relative"
         style="border-left: 1px solid #049;grid-template-columns: 50% 50%">
      <div class="img">
        <canvas id="vscan"></canvas>
      </div>
      <div class="img">
        <canvas id="iscan"></canvas>
      </div>
      <div class="img">
        <canvas id="vspec"></canvas>
      </div>
      <div class="img">
        <canvas id="ispec"></canvas>
      </div>
      <div class="img" style="">
        <div id="vline"></div>
      </div>
      <div class="img" style="">
        <div id="iline"></div>
      </div>
    </div>
  </div>
  <div class="ms-1 d-flex flex-column" style="width: 300px">
    <div class="bg-primary text-light" style="height: 28px">
      <label class="btn-r">
        数据 </label>
    </div>
    <div class="flex-grow-1  position-relative">
      <div class="position-absolute h-100 w-100" style="overflow-y: auto">
        <table class="table table-bordered table-dark table-sm">
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
          <tr>
            <th>1</th>
            <td>312312.3213</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/xtool.js"></script>
<script src="/static/js/echarts.min.js"></script>
<script>
  let ctrls = $('#ctrl input[type=range]');
  let img = document.querySelector('#img-viewer>img');
  ctrls.change(() => {
    let cst = ctrls[0].value
    let brt = ctrls[1].value
    let hue = ctrls[2].value
    let sfc = ctrls[3].value
    img.style.filter = `brightness(${brt}) contrast(${cst}) hue-rotate(${hue}deg) saturate(${sfc})`
  })
  let reset = () => {
    ctrls[0].value = 1
    ctrls[1].value = 1
    ctrls[2].value = 0
    ctrls[3].value = 1
    img.style.filter = ''
  }


  class Main {
    constructor() {
      this.viewer = document.body
      this.thumbs = $('.thumbs')
    }

    history() {
      this.viewer.className = 'M3'
      // 关闭实时监视信息通道
      this.ws.close();
      resize_all()
    }

    realtime() {
      this.viewer.className = 'M1'
      // 打开实时监视信息通道
      let ws = this.ws = new WebSocket(url_for_ws('realtime'))
      ws.onopen = (v) => ws.send('query: ZSCXJ')
      ws.onmessage = this.msg.bind(this)
      resize_all()
    }

    msg(v) {
      // 实时监测数据据通道
      v.data
      // todo ： 解析实时数据，触发页面显示改变


    }
  }


  class ImViewer {
    constructor(scan, spec, line) {
      this.scan = document.getElementById(scan)
      this.spec = document.getElementById(spec)
      this.line = document.getElementById(line)
      this._3 = echarts.init(this.line, 'dark')
      this._3.setOption({
        backgroundColor: 'transparent',
        title: {text: '--------'},
        xAxis: {type: 'value'},
        yAxis: {type: 'value'},
        series: {type: 'line', data: [[1, 2], [2, 3], [3, 2], [13, 1]]}
      })
      this._3.setOption({
        backgroundColor: 'transparent',
        title: {text: '--------'},
        xAxis: {type: 'value'},
        yAxis: {type: 'value'},
        series: {type: 'line', data: [[1, 2], [2, 3], [3, 2], [13, 1]]}
      })
      this._2 = this.spec.getContext('2d')
      this._1 = this.spec.getContext('2d')
      // this._2
    }

    update_frame(v) {


    }


  }

  main = new Main()
  vi = new ImViewer('vscan', 'vspec', 'vline');
  ir = new ImViewer('iscan', 'ispec', 'iline');

  function resize_all() {
    vi._3.resize()
    ir._3.resize()
  }

  setTimeout(resize_all, 100)
  window.onresize = resize_all

</script>
</body>
</html>